<template>
  <div class="form-container flex flex-column">
    <div class="flex flex-center form color666 font-14 bold">
      <div
        class="item flex-center"
        v-for="(item, index) in seachList"
        :key="index"
        :title="item.label"
        @click="handleShowPopup(item.model)"
      >
        <div class="label">{{ item.label }}：</div>
        <div class="select rel">{{ formText[item.model] }}</div>
        <img class="img" src="../../../../../../assets/imgs/reconsitution/zl/jt_xl.png" alt="" />
      </div>
    </div>

    <van-popup v-model="showPopupmarketType" position="bottom">
      <van-picker
        show-toolbar
        title="请选择专业线"
        :columns="marketTypeList"
        @confirm="handleconfirm($event, 'marketType')"
        @cancel="showPopupmarketType = false"
        :defaultIndex="defaultIndex"
      />
    </van-popup>

    <van-popup v-model="showPopupkpiCode" position="bottom">
      <van-picker
        show-toolbar
        title="请选择排名指标"
        :columns="kpiCodeList"
        @confirm="handleconfirm($event, 'kpiCode')"
        @cancel="showPopupkpiCode = false"
        :defaultIndex="kpicodedefaultIndex"
      />
    </van-popup>
  </div>
</template>

<script>
import { parseResultAction } from '@/api/manage'

export default {
  name: 'GdXceoAppSearch',
  data() {
    return {
      showPopupkpiCode: false,
      showPopupmarketType: false,
      seachList: [
        { label: '排名指标', model: 'kpiCode' },
        { label: '专业线', model: 'marketType' },
      ],
      formText: {
        marketType: '全部',
        kpiCode: '',
      },
      form: {
        marketType: '0',
        kpiCode: '',
      },
      kpiCodeList: [],
      marketTypeList: [
        {
          text: '全部',
          code: '0',
        },
        {
          text: '营业线',
          code: '1',
        },
        {
          text: '社渠线',
          code: '2',
        },
        {
          text: '智家线',
          code: '3',
        },
      ],
      defaultIndex: '',
      kpicodedefaultIndex: '',
    }
  },

  created() {},

  methods: {
    async getKpiCodeList({ marketType, kpiCode } = {}) {
      const { result } = await parseResultAction('8a31cdd68a7e768a018ac2c026560016', {})
      this.kpiCodeList =
        result.map(({ kpi_name, kpi_id }) => {
          return {
            text: kpi_name,
            code: kpi_id,
          }
        }) || []
      if (!marketType && !kpiCode) {
        this.handleconfirm(this.kpiCodeList[0], 'kpiCode')
        return Promise.resolve({ code: this.kpiCodeList[0].code, type: 'kpiCode' })
      }
      if (marketType || kpiCode) {
        this.form.marketType = marketType
        this.form.kpiCode = kpiCode
        this.formText = {
          ...this.formText,
          marketType: this.marketTypeList.find(({ code }) => code === marketType).text,
          kpiCode: this.kpiCodeList.find(({ code }) => code === kpiCode).text,
        }
        this.defaultIndex = this.marketTypeList.findIndex((obj) => obj.code === marketType)
        this.kpicodedefaultIndex = this.kpiCodeList.findIndex((obj) => obj.code === kpiCode)
      }
    },
    handleShowPopup(type) {
      this[`showPopup${type}`] = true
    },
    handleconfirm({ code, text }, type) {
      this.form[type] = code
      this.formText[type] = text
      this[`showPopup${type}`] = false
      this.$emit('changeForm', { code, type })
    },
  },
}
</script>

<style lang="less" scoped>
@import '~@assets/less/reconsitution/common.less';
.form-container {
  padding: 3.2vw 5.3333vw;
  box-shadow: 0 1px 4px 1px #f3f7fa;
  .item {
    margin-right: 5.3333vw;
    flex-wrap: wrap;
    .select {
      width: 18.3333vw;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      display: inline-block;
      .label {
        flex-shrink: 0;
      }
    }
  }
  .img {
    width: 3.7333vw;
    height: 3.7333vw;
  }
}
.split {
  width: 100%;
  height: 2.1333vw;
  background: #f3f7fa;
}
</style>